import './FinanceJson.scss'
import { v4 } from 'uuid'
import { useState } from 'react'
import { useMount, useRequest } from 'ahooks'
import { MinusCircleOutlined } from '@ant-design/icons'
import { Switch, Divider, Input, notification, Button } from 'antd'

import { Http } from '../../../Api'

const A01 = [
    { uuid: 1, title: '收入' },
    { uuid: 2, title: '成本' },
    { uuid: 3, title: '毛利' },
    { uuid: 4, title: '利润总额' },
    { uuid: 5, title: '毛利率' },
    { uuid: 6, title: '利润率' },
]

export const FinanceJson = () => {
    const [api, contextHolder] = notification.useNotification()
    const [Data, setData] = useState({ status: false, A01: {}, A02: [], A03: [], A04: [] })

    const { runAsync: getData } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            if (res) {
                console.log('系统数据', res)
                setData(res)
            } else {
                const data = JSON.stringify(JSON.stringify(Data))
                posData({ url: 'posSaveJsonInfoByUuid', data, path: ['FinanceJson'] })
            }
        },
    })

    const { runAsync: posData } = useRequest(Http, {
        manual: true,
        onSuccess: () => {
            api.success({ key: 'success', message: '数据保存成功!' })
            getData({ url: 'getJsonInfoByUuid', data: { uuid: 'FinanceJson' } })
        },
    })

    useMount(() => {
        getData({ url: 'getJsonInfoByUuid', data: { uuid: 'FinanceJson' } })
    })

    const onAdd = e => {
        const json = { uuid: v4(), title: '名称', type: '类型', amount: '金额' }
        Data[e] = [...Data[e], json]
        setData({ ...Data })
    }

    const onDelete = (type, uuid) => {
        const data = Data[type].filter(v => v.uuid !== uuid)
        setData({ ...Data, [type]: data })
    }

    const onSubmit = () => {
        const data = JSON.stringify(JSON.stringify(Data))
        posData({ url: 'posSaveJsonInfoByUuid', data, path: ['FinanceJson'] })
    }

    const InputTemplate = ({ uuid, type, value }) => (
        <Input
            value={value}
            onChange={e => {
                const [one, two] = type.split('-')
                Data[one].find(v => v.uuid === uuid)[two] = e.target.value
                setData({ ...Data })
            }}
        />
    )

    return (
        <div className="FinanceJson">
            {contextHolder}
            <div className="Label">
                <div>是否启用 : </div>
                <Switch
                    checked={Data.status}
                    onChange={e => {
                        Data.status = e
                        setData({ ...Data })
                    }}
                />
            </div>
            <Divider orientation="left">财务概况</Divider>
            {A01.map(({ uuid, title }) => (
                <div className="Label" key={uuid}>
                    <div>{title} : </div>
                    <Input
                        value={Data.A01[title]}
                        onChange={e => {
                            Data.A01[title] = e.target.value
                            setData({ ...Data })
                        }}
                    />
                </div>
            ))}
            <Divider orientation="left">集团内统计</Divider>
            {Data.A02.map(({ uuid, title, type, amount }) => (
                <div className="LabelA01" key={uuid}>
                    <InputTemplate uuid={uuid} type="A02-title" value={title} />
                    <InputTemplate uuid={uuid} type="A02-type" value={type} />
                    <InputTemplate uuid={uuid} type="A02-amount" value={amount} />
                    <MinusCircleOutlined className="onDelete" onClick={() => onDelete('A02', uuid)} />
                </div>
            ))}
            <div className="itemSubmit">
                <Button block onClick={() => onAdd('A02')}>
                    追加
                </Button>
            </div>
            <Divider orientation="left">集团外统计</Divider>
            {Data.A03.map(({ uuid, title, type, amount }) => (
                <div className="LabelA01" key={uuid}>
                    <InputTemplate uuid={uuid} type="A03-title" value={title} />
                    <InputTemplate uuid={uuid} type="A03-type" value={type} />
                    <InputTemplate uuid={uuid} type="A03-amount" value={amount} />
                    <MinusCircleOutlined className="onDelete" onClick={() => onDelete('A03', uuid)} />
                </div>
            ))}
            <div className="itemSubmit">
                <Button block onClick={() => onAdd('A03')}>
                    追加
                </Button>
            </div>

            <Divider orientation="left">财务明细</Divider>
            {Data.A04.map(({ uuid, title, type, amount }) => (
                <div className="LabelA01" key={uuid}>
                    <InputTemplate uuid={uuid} type="A04-title" value={title} />
                    <InputTemplate uuid={uuid} type="A04-type" value={type} />
                    <InputTemplate uuid={uuid} type="A04-amount" value={amount} />
                    <MinusCircleOutlined className="onDelete" onClick={() => onDelete('A04', uuid)} />
                </div>
            ))}
            <div className="itemSubmit">
                <Button block onClick={() => onAdd('A04')}>
                    追加
                </Button>
            </div>
            <div style={{ height: 32 }} />
            <div className="itemSubmit">
                <Button type="primary" block onClick={onSubmit}>
                    保存
                </Button>
            </div>
        </div>
    )
}
